<!DOCTYPE html>
<html lang="en">

<head>

    {{template "common/head.html" .}}

    <style type="text/css">
        .page-course-notice {
            position: relative;
            padding: 40px 28px;
            height: 100%;
        }

        .page-course-notice-container {
            height: 100%;
        }

        .page-course-notice .bg {
            position: absolute;
            width: 200px;
            height: auto;
            right: 0;
            top: 0;
        }

        .page-course-notice-split-line {
            width: 100%;
            height: 5px;
            background: #fec901;
            -webkit-box-shadow: 1px 3px 9px 0px rgba(202, 202, 202, 0.71);
            box-shadow: 1px 3px 9px 0px rgba(202, 202, 202, 0.71);
            border-radius: 3px;
            margin: 8px auto 16px;
        }

        .page-course-notice-title {
            line-height: 28px;
        }

        .page-course-notice-data-list {
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            -ms-flex: 1;
            flex: 1;
            overflow-y: scroll;
            background-color: #fff;
            padding: 20px 15px;
        }

        .page-course-notice-data-list::-webkit-scrollbar {
            display: none;
        }

        .page-course-notice-data-item {
            margin-bottom: 36px;
        }

        .page-course-notice-data-content p {
            font-weight: 400;
            line-height: 20px;
        }

        .loading {
            margin-top: 2%;
            width: 100%;
            text-align: center;
            font-size: 14px;
        }

        .first-loading {
            margin-top: 50%;
            width: 100%;
            text-align: center;
            font-size: 14px;
        }
    </style>

</head>


<body>
<div class="page-main">
    <div class="page-main-container">
        <div class="child-view page-course-notice"><img src="/static/front/images/bg2.png" alt="" srcset="" class="bg">
            <div flex="dir:top" class="page-course-notice-container">
                <div class="ui-text-28 ui-pd-l-26 ui-title-color ui-mg-b-16 page-course-notice-title">课程通知</div>
                <div class="ui-title-color page-course-notice-data-list" id="data-list">

                </div>
                <div id="loading" class="loading">玩命加载中...</div>
            </div>
        </div>
    </div>
    <form id="data-form">
        {{.xsrfdata}}
        <input type="hidden" id="cur-page" name="p" value="1">
    </form>
</div>
</body>

<script>

    var canSubmit = true,
        canLoad = true,
        p = 1;

    function firstLoading(t) {
        $('#loading').removeClass('loading').addClass('first-loading').text(t).show();
    }

    function loading(t) {
        $('#loading').removeClass('first-loading').addClass('loading').text(t).show();
    }

    function loadMore() {

        if (!canSubmit) return false;
        canSubmit = false;
        var curPage = p++;
        $('#cur-page').val(curPage);
        if (curPage == 1) {
            firstLoading('玩命加载中...');
        } else {
            loading('玩命加载中...');
        }

        setTimeout(function () {
            $.ajax({
                url: '{{urlfor "teacher.CourseNoticeController.LoadMore"}}',
                type: 'POST',
                data: $('#data-form').serialize(),
                success: function (res) {

                    canSubmit = true;
                    if ($.trim(res) == "") {
                        canLoad = false;
                        if (curPage == 1) {
                            firstLoading('空空如也');
                            $('#data-list').hide();
                        } else {
                            loading('扯不动了，到底了');
                        }
                    } else {
                        $('#loading').hide();
                        $('#data-list').append(res);
                    }

                }
            });
        }, 1000);
    }

    $(function () {

        loadMore();

        $(window).scroll(function () {
            //已经滚动到上面的页面高度
            var scrollTop = $(this).scrollTop();
            //页面高度
            var scrollHeight = $(document).height();
            //浏览器窗口高度
            var windowHeight = $(this).height();
            //此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作
            if (scrollTop + windowHeight == scrollHeight) {
                if (!canLoad) {
                    return false;
                }
                loadMore();
            }
        });

    });

</script>

</html>